<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>状态选择器</title>
    <style>
      input {
        outline: none; /* 去除文本框默认选中时产生的蓝色外框 */
      }
      /* 
        状态选择器,主要针对表单控件,权重 [0,1,0]
        :hover        鼠标悬停(常用)
        :active       鼠标按住
        :focus        获取焦点
        :checked      选中

        :required     必须
        :read-only    只读
        :disabled     禁用
        :enabled      启用
        ...
      */
      /* 获取焦点 */
      :focus {
        border: 1px solid pink;
      }

      :required {
        border: 1px solid red; /* 边框1像素粗细,实线,红色 */
      }

      :disabled {
        border: 1px solid green;
      }

      /* 当单选或者多选按钮被选中时,让紧跟它的label标签的字体变成蓝色 */
      :checked + label {
        color: blue;
      }

      /* 鼠标悬停在p上面时,字体颜色变成红色 */
      p:hover {
        color: red;
      }
      p:active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <input type="text" required />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" required />
    <input type="password" disabled />
    <input type="radio" /><label>男</label>
    <input type="checkbox" />

    <p>这是一段文字</p>
  </body>
</html>
